<template>
	
	<view class="img-group" @click="click">
		<!-- <view class="background-copy"></view> -->
		<view class="background-copy"></view>	
		<view class="background">
			<image :src="options.image_url"></image>
		</view>
			
		<view class="like">
			<image src="../../static/icon/like.png"></image>
			<view class="count">{{options.comment_count}}</view>
		</view>
		<view class="message">
			<view class="title">{{options.title}}</view>
			<view class="user">
				<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F30%2F90%2F40%2F309040a0602c672cebc6ab3a1bbbc8cd.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651372138&t=115361cbd4f6879510a688d6fd1429bd">
				</image>
				<view class="name">{{options.user_name}}</view>
			</view>
			<view class="precount">预报人数:  {{options.pre_count}}</view>
			<view class="deadline">{{options.deadline}}</view>
			<view class="max-close-view" @click.stop="close">
				<view class="close-l close-h"></view>
				<view class="close-l close-v"></view>
			</view>
		</view>
		
	</view>

</template>

<script>
	export default {
		props: {
			options: {
				type: Object,
				default: function(e) {
					return {}
				}
			}
		},
		methods: {
			click() {
				this.$emit('click');
			},
			close(e) {
				this.$emit('close');
			}
		}
	}
</script>

<style>
	.img-group{
		display: inline;
		position: relative;
	}
	.background-copy{
		transform: rotate(-4deg);
		position: absoulte;
		width: 670rpx;
		height: 670rpx;
		margin: 20rpx auto;
		background-color:rgba(214, 223, 247, 1);
		border-radius: 32rpx;
		margin-bottom: 40rpx;
	}
	.background image{
		width: 100%;
		height: 100%; 
		background-color: #eeeeee;
		border-radius: 30rpx;
	}
	.background{
		position: absolute;
		width: 670rpx;
		height: 670rpx;
		left: 40rpx;
		margin: 20rpx auto;
		margin-bottom: 40rpx;
	}
	.like{
		display: inline;
		position: absolute;
		width: 190rpx;
		height: 76rpx;
		right: 80rpx;
		top: 50rpx;
		border-radius: 60rpx;
		background-color: rgba(230, 230, 230, 0.5);
	}
		
	.like image{
		width: 70rpx;
		height: 70rpx;
		left: 10rpx;
	}
	.like .count{
		position:absolute;
		left: 85rpx;
		font-weight: 540;
		top: 24%;
	}
	.message{
		position:absolute;
		width:640rpx;
		height:200rpx;
		left:50rpx;
		top:470rpx;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
	}
	.title{
		width:520rpx;
		height:60rpx;
		font-size: 40rpx;
		font-weight: 500;
		color:rgba(255, 255, 255, 1);
		z-indent:2;
		top: 10rpx;
		left: 20rpx;
	}
	.user{
		display: inline;
		width:600rpx;
		height:100rpx;
		left: 20rpx;
		top: 10rpx;
	}
	.user image{
		width:100rpx;
		height:100%; 
		border-radius: 80rpx;
	}
	.user .name{
		position:absolute;
		font-size: 35rpx;
		font-weight: 500;
		text-align: left;
		color:rgba(255, 255, 255, 1);
		left:120rpx;
		top: 25%;
	}
	.precount{
		position:absolute;
		text-align: right;
		top: 10rpx;
		right: 10rpx;
		font-size: 26rpx;
		color:rgba(255, 255, 255, 1);		
	}
	.deadline{
		text-align: right;
		bottom: 10rpx;
		right: 10rpx;
		font-size: 24rpx;
		color:rgba(255, 255, 255, 1);
	}
	.max-close-view {
		position: relative;
		align-items: center;
		flex-direction: row;
		width: 40rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-width: 1rpx;
		border-style: solid;
		border-color: #ffffff;
		border-radius: 4px;
		justify-content: center;
		text-align: center;
		left: 320rpx;
		top: -40rpx;
	}
	
	.close-l {
		position: absolute;
		width: 18rpx;
		height: 1rpx;
		background-color: #ffffff;
	}
	.close-h {
		transform: rotate(45deg);
	}
	.close-v {
		transform: rotate(-45deg);
	}
</style>
